<!-- geolocation -->
<div data-role="dialog" id="geoPopup" class="ui-corner-all">

    <script>
        $("#geoPopup").bind('pagebeforeshow', function(){
            console.log("geoPopup pagebeforeshow");
        
            var addrs = JSON.parse(sessionStorage.geolocation);
            
            if (sessionStorage.geoWarning == "false"){
                $("#GPgeoWarning").hide();
            }
            
            for (var i=0; i<5; i++){
                $("#GPli"+i).hide();
            }  
            
            for (var i=0; i<addrs.length; i++){
                $("#GPitem"+i).html(addrs[i]);
                $("#GPli"+i).show();
            }
        });   
    </script>

    <div data-role="header" data-theme="d" class="ui-corner-top">
        <h1>Where are you?</h1>
    </div>
    <div data-role="content" data-theme="d" style="padding:15px;">
        <h3>Choose a location</h3>
        <p id="GPgeoWarning" class="error">Warning: this seems very inaccurate</p>
        <ul id="GPlocList" data-role="listview" data-inset="true" data-theme="a">
            <li id="GPli0"><a id="GPitem0" class="ui-corner-all">1</a></li>
            <li id="GPli1"><a id="GPitem1" class="ui-corner-all">2</a></li>
            <li id="GPli2"><a id="GPitem2" class="ui-corner-all">3</a></li>
            <li id="GPli3"><a id="GPitem3" class="ui-corner-all">4</a></li>
            <li id="GPli4"><a id="GPitem4" class="ui-corner-all">5</a></li>
        </ul>
    </div>
</div>
<!-- geolocation -->